<template>
    <div class="bpmn-container" :info="tempInfo">
        <!-- BPMN渲染容器 -->
        <div ref="bpmnRef" class="bpmn-wrapper"></div>
    </div>
</template>

<script setup lang="ts" name="BpmnShowComponent">
import {computed, defineProps, onMounted, ref} from 'vue';
import BpmnViewer from 'bpmn-js/lib/Viewer';
import 'bpmn-js/dist/assets/diagram-js.css'; // 基础样式
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
import {doThirdServiceValue} from "@/utils/lowcode/thirdService.ts"; // BPMN字体

let props = defineProps(['propJson', 'commonParam']);
let propJson = computed(() => {return props['propJson']})
let commonParam = computed(() => {return props['commonParam']})

const bpmnRef = ref(null);
let bpmnViewer:any = ref(null);

function execThen(resValue:any) {
    // 加载BPMN文件
    bpmnViewer.value.importXML(resValue)
        .then(() => {
            const canvas = bpmnViewer.get('canvas');
            canvas.zoom('fit-viewport'); // 自适应视图
        })
        .catch(err => {
            console.error('BPMN加载失败:', err);
        });
}

let tempInfo = computed(async () => {
    if (propJson.value.editFlag) {
        return;
    }
    await doThirdServiceValue(propJson.value.bpmnXmlInfo, commonParam.value, execThen, () => {}, null)
});

// 初始化BPMN渲染器
onMounted(() => {
    bpmnViewer.value = new BpmnViewer({
        container: bpmnRef.value,
        width: '100%',
        height: propJson.value.height,
    });
    // 加载BPMN文件
    const bpmnXml = '';
    bpmnViewer.value.importXML(bpmnXml).then(() => {
            const canvas = bpmnViewer.get('canvas');
            canvas.zoom('fit-viewport');
        }).catch(err => { });
});
</script>

<style scoped lang="less">
.bpmn-wrapper {
    border: 1px solid #ccc;
}
</style>